<template>
  <base-container position="in">
    <!-- <table border style="width: 100%">
      <tr>
        <td style="width: 40%">下拉选择器</td>
        <td style="width: 60%">{{value}}
          <drop-down-selector v-model="value" :options="{placeholder:'单位名称',disabled: false,multiple: true,selection:true,key:'id',label: 'name',clearable: true,collapseTags: 5}" :request-fun="getList" :showField="[{prop:'name',label: '名称',width: '200'},{prop: 'sex',label: '性别'}]" :returnField="['id','name']" :page-option="{pageSizes: [1,2,3,4,5]}"></drop-down-selector>
        </td>
      </tr>
      <tr>
        <td>多选组件测试</td>
        <td> -->
    <el-row> 
      <el-col>选中值返回{{ value }}</el-col>
      <el-col>选中的Key: {{selectData1.key}}</el-col>
      <el-col>选中的label: {{selectData1.label}}</el-col>
      <el-col>选中的子项对象: {{selectData1.checkedItems}}</el-col>
    </el-row>
    <all-select v-model="value" :list="list" :options="{title: 'name', label:'value', key: 'id'}" @returnData="returnData1" ></all-select>

    
    <!-- </td>
      </tr>
    </table> -->
    <!-- 表格 表单 组件 -->
    <!-- <base-table-form></base-table-form> -->

    <!-- 文件上传基础组件 -->
    <!-- <base-file-upload accept=".jpg,.png,.webp" :multiple="true" :showFileList="true"></base-file-upload> -->

    <!-- three.js测试 -->
    <!-- <base-three></base-three> -->

    <!-- <base-tree-grid></base-tree-grid> -->
    <!-- <base-btn-upload></base-btn-upload> -->
    <!-- <base-upload></base-upload> -->
    <!-- <base-tree-table></base-tree-table> -->
    <!-- {{form}}
    <router-link to="/login" tag="el-button">测试tag属性</router-link>
    <el-button type="waring" @click="toggleClick">切换编辑查看</el-button>
    <avue-form v-model="form" :option="option" @submit="handleSubmit"></avue-form> -->
    <!-- <test-table :options="tableOptions"></test-table> -->
    <!-- <base-table></base-table> -->
    <!-- <vr-map></vr-map> -->
    <!-- <test-vmodel v-model="formValue"></test-vmodel> -->
  </base-container>
</template>

<script>
import WebOfficeSDK from '@/palugs/web-office-sdk-v1.1.8.es';
import { routes } from '@/testData/table.js';
import baseTreeGrid from '../components/globalComponent/base-tree-grid.vue';
import { allMenu } from '@/utils/testData/allMenu'
import TestVmodel from '../components/globalComponent/test-vmodel.vue';
import Recorder from "js-audio-recorder"
const lamejs = require("lamejs")
// const recorder = new Recorder({
//   sampleBits: 16,
//   sampleRate: 16000,
//   numChannels: 1,
// })

// // 绑定事件-打印的是当前录音数据
// recorder.onprogress = function (params) {
//   // console.log('--------------START---------------')
//   // console.log('录音时长(秒)', params.duration);
//   // console.log('录音大小(字节)', params.fileSize);
//   // console.log('录音音量百分比(%)', params.vol);
//   // console.log('当前录音的总数据([DataView, DataView...])', params.data);
//   // console.log('--------------END---------------')
// }


export default {
  components: { baseTreeGrid, TestVmodel },
  data() {
    return {
      selectData1: {},
      list: [
        {id: 1, name: '灭火器类型1' ,data: [{value: 'A',id: 1},{value: 'B',id: 2},{value: 'C',id: 3}]},
        {id: 2, name: '灭火器类型2' ,data: [{value: 'D',id: 4},{value: 'E',id: 5},{value: 'F',id: 6}]}
      ],
      value: '1,2,3,4',//[1,2] 或 1,2


      formValue: '',
      form: {},
      option: {
        mockBtn: true,
        detail: true,
        labelWidth: 100,
        column: [
          {
            label: '多选',
            prop: 'selects',
            type: 'select',
            dataType: 'string',
            multiple: false,
            dicData: [{
              label: '选项1',
              value: '1'
            }, {
              label: '选项2',
              value: '2'
            }, {
              label: '选项3',
              value: '3'
            }], row: true
          },
          {
            label: '多选',
            prop: 'checkbox',
            type: 'checkbox',
            dataType: 'string',//array 这样返回来的值就是 [1,2,3] string 返回 '1,2,3'
            order: 1,
            dicData: [{
              label: '选项1',
              value: 1
            }, {
              label: '选项2',
              value: 2
            }, {
              label: '选项3',
              value: 3
            }], row: true
          },
          {
            label: '单选',
            prop: 'radio',
            type: 'radio',
            dataType: 'number',//返回的值类型
            dicData: [{
              label: '选项1',
              value: 1
            }, {
              label: '选项2',
              value: 2
            }, {
              label: '选项3',
              value: 3
            }]
          },
          {
            label: "本地字典",
            prop: "text1",
            type: "select",
            props: {
              label: "name",
              value: "code",
            },
            dicData: [
              {
                name: "本地字典1",
                code: 0,
              },
              {
                name: "本地字典2",
                code: 1,
              },
            ],
            mock: (form) => {
              return '自定义逻辑' + form.name
            },
          },
        ],
      },
      allOption: {
        selection: true,// 是否有选择按钮
        menu: true,//操作列 切换 显隐
        menuAlign: '',//操作列 是否居中
        menuWidth: '',//操作列 宽度
        column: [//循环数据
          ...routes.data.records
        ]
      },
      tableOptions: {
        selection: true,
        // formatSelection(row, index) {if(index == 1) {return true} else {return false}},
        formatSelection(row, index) { return true },
        topTip: '<span style="color:red">顶部提示</span>',
        column: [
          {
            prop: 'name',
            label: '姓名',
            searchPlaceholder: '姓名',
            searchTip: '',
          }
        ]
      }
    }
  },
  methods: {
    returnData1(value) {
      console.log(value,'value')
      // return;
      this.selectData1 = value
    },
    //请求函数
    getList() {
      return new Promise((resolve, reject) => {
        console.log(1111)
      })
    },
    handleSubmit(form, done) {
      console.log(form)
      done()
    },
    //切换 查看 编辑 
    toggleClick() {
      this.option.detail = !this.option.detail
    }
  },
  mounted() {
    // console.log(this.$route);
    // console.log(allMenu,'allMenu')
    // var demo = WebOfficeSDK.config({
    //   url: 'http://192.168.1.249:1888/api/blade-xfjd/system/templateSetup/wsPrintBywssyid/%E4%B8%BE%E6%8A%A5%E6%8A%95%E8%AF%89%E5%8F%97%E7%90%86%E7%99%BB%E8%AE%B0(%E7%BC%96%E5%8F%B7%EF%BC%9A%E3%80%942021%E3%80%95%E7%AC%AC1995%E5%8F%B7)?wssyid=6100008517', // 如果需要通过js-sdk传递token方式鉴权，则需要包含_w_tokentype=1参数
    // })
    // // 如果需要对iframe进行特殊的处理，可以通过以下方式拿到iframe的dom对象
    // console.log(demo.iframe)
    // // 打开文档结果
    // demo.on('fileOpen', function (data) {
    //   console.log(data.success)
    // })
  }
}
</script>

<style scoped lang="scss">
</style>
